<template>
    <el-card shadow="never" class="aui-card--fill">
        <div v-if="switchContent == '列表'">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="工号">
                    <el-input v-model="formInline.eeNumber" size="small" placeholder="工号"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="formInline.realName" size="small" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="small" @click="deleteDatas">批量删除
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" size="small" @click="exportHandle()">{{ $t('export') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="entryClick">入职</el-button>
                </el-form-item>
                <!-- <el-form-item>
                  <el-button type="primary" size="small" @click="departClick">离职</el-button>
                </el-form-item> -->
            </el-form>
            <el-table :data="dataList" style="width: 100%" border @selection-change="deletesHandle">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="工号" align="center">
                    <template slot-scope="scope">
                        <span style="color:blue;cursor: pointer;"
                              @click="handleLook(scope.row)">{{ scope.row.eeNumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" label="姓名" align="center" width="120">
                </el-table-column>
                <el-table-column prop="gender" label="性别" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 0 ? "男" : "女" }}
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" align="center">
                </el-table-column>
                <el-table-column prop="nation" label="民族" align="center">
                </el-table-column>
                <el-table-column prop="entryDate" label="入职时间" align="center" width="120">
                    <template slot-scope="scope">
                        {{ (scope.row.entryDate || '').substr(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="jobStatus" label="在职状态" align="center">
                </el-table-column>
                <el-table-column prop="seniority" label="工龄" align="center" width="110">
                    <template slot-scope="scope">
                        {{ setSeniority(scope.row.confirmDate, scope.row.jobStatus) }}
                    </template>
                </el-table-column>
                <el-table-column prop="post" label="职务" align="center" width="120">
                </el-table-column>
                <el-table-column prop="deptName" label="部门" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.deptName" placement="top-start">
                            <div class="cell-content">{{ scope.row.deptName }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="联系电话" align="center" width="140">
                </el-table-column>
                <el-table-column prop="idNumber" label="身份证号" align="center" width="160">
                </el-table-column>
                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="deleteHandle(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total="total" @currentChange="currentChange" :currentPage="currentPage"
                        @sizeChange="sizeChange">
            </Pagination>
        </div>
        <!-- 详情 -->
        <div v-if="switchContent == '详情'">
            <Details :detailedInformation="detailedInformation" @cancelBtn="cancelBtn"></Details>
        </div>
        <!-- 修改 -->
        <div v-if="switchContent == '修改'">
            <Modify ref="child" @editedContent="editedContent" :employeeId="employeeId"
                    :department="department"></Modify>
        </div>
    </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import Modify from './dossier-modify.vue';
import Details from './dossier-details.vue'
import Pagination from '../../../../components/pagination.vue'

export default {
    mixins: [mixinViewModule],
    components: {Pagination, Details, Modify},
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: '/employee/employee/page',
                getDataListIsPage: true,
                exportURL: '/employee/employee/export',
            },
            formInline: {
                eeNumber: '',
                realName: ''
            },
            tableData: [],
            total: 0,
            currentPage: 1,
            sizePage: 10,
            switchContent: '列表',
            detailedInformation: {},
            dataForm: {},
            multipleSelection: [],
            employeeId: '',
            dataList: [],
            deleteData: [],
            department: ''
        };
    },
    created() {
        this.getUserPage();
    },
    methods: {
        deletesHandle(val) {
            this.deleteData = val
        },
        deleteDatas() {
            if (this.deleteData.length > 0) {
                let arr = this.deleteData.map(it => it.id)
                this.$http.delete('/employee/employee', {data: arr}).then(({data: res}) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getUserPage()
                })
            } else {
                this.$message("请先进行选择后才能删除")
            }
        },
        deleteHandle(row) {
            this.$http.delete('/employee/employee', {data: [row.id]}).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getUserPage()
            })
        },
        // 基本信息接口-------------
        getUserPage() {
            this.$http.get(`/employee/employee/page`, {
                params: {
                    page: this.currentPage,
                    limit: this.sizePage,
                    eeNumber: this.formInline.eeNumber,
                    realName: this.formInline.realName,
                }
            }).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.total = res.data.total
                this.dataList = res.data.list;
            })
        },
        // 当前页
        currentChange(val) {
            this.currentPage = val
            this.getUserPage();
        },
        // 每页条数
        sizeChange(val) {
            this.sizePage = val
            this.getUserPage();
        },
        // 工龄
        setSeniority(confirmDate, jobStatus) {
            if (confirmDate && jobStatus == '在职') {
                var EndTime = new Date(confirmDate);//转正日期
                var NowTime = new Date();//系统日期
                // 分别取二个日期的年、月、日值
                const d1 = EndTime.getDate();//日
                const m1 = EndTime.getMonth() + 1;//月
                const y1 = EndTime.getFullYear();//年
                const d2 = NowTime.getDate();
                const m2 = NowTime.getMonth() + 1;
                const y2 = NowTime.getFullYear();
                // 获取每个月的天数，这里要注意一下闰年的2月
                const getMonthDays = function (y, m) {
                    const aMonthDays = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                    if (m === 2 && (y % 400 === 0 || (y % 4 === 0 && y % 100 !== 0))) {
                        return 29;
                    }
                    return aMonthDays[m];
                };
                let y, m, d;
                let tmpM = 0;
                let tmpY = 0;
                // 计算日，不足时向月份借
                if (d2 >= d1) {
                    d = d2 - d1;
                } else {
                    tmpM = -1;
                    d = getMonthDays(y1, m1) + d2 - d1;
                }
                // 计算月，不足时向年份借
                if (m2 + tmpM >= m1) {
                    m = m2 + tmpM - m1;
                } else {
                    tmpY = -1;
                    m = 12 + m2 + tmpM - m1;
                }
                // 计算年
                y = y2 + tmpY - y1;
                if (y > 0) {
                    var str = y + '年 ' + ('0' + m).substr(-2) + '月 ' + ('0' + d).substr(-2) + '天 ';
                } else if (m > 0) {
                    var str = m + '月 ' + ('0' + d).substr(-2) + '天 ';
                } else if (d > 0) {
                    var str = d + '天 ';
                }
                return str;
            } else {
                return '无工龄'
            }
        },
        // 跳转详情
        handleLook(row) {
            this.detailedInformation = row
            this.switchContent = '详情'
        },
        // 取消
        cancelBtn() {
            this.switchContent = '列表'
        },
        // 编辑
        handleEdit(data) {
            this.employeeId = data.id
            this.department = data.deptName
            this.switchContent = '修改'
            this.$nextTick(() => {
                // 基本信息
                for (let key in this.$refs.child.dataForm) {
                    if (data && data.hasOwnProperty(key)) {
                        this.$refs.child.dataForm[key] = data[key]
                        this.$refs.child.dataForm['gender'] = data['gender'].toString()
                        this.$refs.child.dataForm['id'] = data['id']
                    }
                }
            })
        },
        editedContent() {
            this.switchContent = '列表'
            this.getUserPage()
        },
        // 搜索
        onSubmit() {
            this.getUserPage();
        },
        // 入职-跳转
        entryClick() {
            //调用页面tab的方法
            // this.$refs.mainContent.tabRemoveHandle('hr-staff-dossier');
            this.tabRemoveHandle('hr-staff-dossier')
            this.$router.push('/hr-check-in')
        },
        tabRemoveHandle(tabName) {
            if (tabName === 'home') {
                return false
            }
            this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
            if (this.$store.state.contentTabs.length <= 0) {
                this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
                return false
            }
            // 当前选中tab被删除
            if (tabName === this.$store.state.contentTabsActiveName) {
                this.$router.push({name: this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1].name})
            }
        }
    },
};
</script>
<style>
.cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item {
    min-width: 0;
}
</style>
